<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测量距离</title>
  <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.1/minemap.css">
  <!--<script src="http://minedata.cn/minemapapi/v1.1/minemap.js"></script>-->
  <script src="./minemap.js"></script>
  <script src="./measure_distance.js"></script>
  <style>

    html, body, #map {
      width: 100%;
      height: 100%;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    .distance-container {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1;
    }

    .distance-container > * {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 11px;
      line-height: 18px;
      display: block;
      margin: 0;
      padding: 5px 10px;
      border-radius: 3px;
    }

  </style>
</head>

<body>
<div id='map'></div>
<div id='distance' class='distance-container'></div>

<script>
  minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
  minemap.solution = 66;
  var map = new minemap.Map({
    container: 'map',
    style: "http://minedata.cn/service/solu/style/id/66",
    center: [109.850705, 40.657452],
    zoom: 16,
    pitch: 0
  });
  var measureDistance = new MeasureDistanceTool(map)
  var distanceContainer = document.getElementById('distance');

  var route_geojson = {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": []
    }
  };
  var myHttp = new MapXMLHttpRequest()

  map.on('load', function () {
    measureDistance.startMeasure(map)
  });
  map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, {layers: ['measure-points']});
    distanceContainer.innerHTML = '';
    measureDistance.pushPointFeatures(e, features);

    var points = document.createElement('allPoints');
    var allPoints = measureDistance.getAllPoints();
    points.textContent = '所有的点有：' + allPoints;
    distanceContainer.appendChild(points);

    replan_route()
  });

  map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, {layers: ['measure-points']});
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : 'crosshair';
  });

  /**
   * MeasureDistance接口有一下两种方式清除数据：
   * .clear()：只是清除数据记录的点的信息和总长度信息
   * .destroy()：清除信息，同时删除添加的图层、数据源等
   *          使用了destroy()之后再次测量要重新调用.startMeasure(map)
   */
  document.getElementById("map").addEventListener("contextmenu", function () {
    document.getElementById("distance").innerHTML = "数据已清空";
    measureDistance.clear()
  });




</script>

</body>
</html>

